<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Charts-column</view>
			<view class="tui-page__desc">柱状图表</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-title">2021年上半年省份商品营业额（单位：w）</view>
			<view class="tui-charts-box">
				<tui-charts-column ref="tui_column_1" tooltip :xAxis="options1.xAxis" :dataset="options1.dataset"
					:max="options1.max" :splitNumber="options1.splitNumber" @click="columnClick"></tui-charts-column>
			</view>
			<view class="tui-title">各部门计划完成情况(完成率：%)</view>
			<view class="tui-charts-box">
				<tui-charts-column ref="tui_column_2" tooltip :xAxis="options2.xAxis" :dataset="options2.dataset"
					:max="options2.max" :splitNumber="options2.splitNumber" :xAxisVal="options2.xAxisVal"
					:legend="options2.legend">
				</tui-charts-column>
			</view>
			<view class="tui-title">八大英雄S8~S9赛季胜场数</view>
			<view class="tui-charts-box">
				<tui-charts-column ref="tui_column_3" isStack tooltip :xAxis="options3.xAxis"
					:dataset="options3.dataset" :max="options3.max" :splitNumber="options3.splitNumber"
					:xAxisVal="options3.xAxisVal" :legend="options3.legend">
				</tui-charts-column>
			</view>
			<view class="tui-title">实时空气质量</view>
			<view class="tui-charts-box">
				<tui-charts-column ref="tui_column_4" columnCap="round" scrollable tooltip :xAxis="options4.xAxis"
					:yAxis="options4.yAxis" :dataset="options4.dataset" :max="options4.max"
					:splitNumber="options4.splitNumber" :columnBarWidth="options4.columnBarWidth"
					:xAxisLine="options4.xAxisLine" :yAxisLabel="options4.yAxisLabel">
				</tui-charts-column>
			</view>
			<view class="tui-title">上月收入每日对比（单位：元）</view>
			<view>
				<tui-charts-column ref="tui_column_5" scrollable :clickEffect="2" :xAxis="options5.xAxis"
					:dataset="options5.dataset" :max="options5.max" :splitNumber="options5.splitNumber"
					:xAxisVal="options5.xAxisVal" :columnBarWidth="options5.columnBarWidth"
					:xAxisLine="options5.xAxisLine" :xAxisTick="options5.xAxisTick" :yAxisLine="options5.yAxisLine"
					:yAxisLabel="options5.yAxisLabel" :splitLine="options5.splitLine"
					:currentIndex="options5.currentIndex">
				</tui-charts-column>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options1: {
					xAxis: ['北京', '上海', '深圳', '广州', '杭州', '武汉'],
					dataset: [{
						name: '营业额',
						color: '#5677fc',
						source: [380, 210, 320, 480, 300, 200]
					}],
					max: 600,
					splitNumber: 100
				},
				options2: {
					legend: {
						show: true
					},
					xAxis: ['管理部', '销售部', '采购部', '生产部', '财务部'],
					dataset: [{
						name: '计划',
						color: '#07c160',
						source: [25, 40, 40, 45, 30]
					}, {
						name: '实际',
						color: '#ff7900',
						source: [15, 30, 20, 50, 30]
					}],
					max: 50,
					splitNumber: 10,
					xAxisVal: {
						show: true,
						height: 60,
						color: '#EB0909',
						formatter: function(val) {
							let rate = (val[1] / val[0] * 100).toFixed(0)
							return `${rate}%`
						}
					}
				},
				options3: {
					legend: {
						show: true
					},
					xAxis: ['鲁班', '王昭君', '貂蝉', '李白', '韩信', '庄周', '刘备', '后羿'],
					dataset: [{
						name: 'S8',
						color: '#00867D',
						source: [60, 70, 90, 20, 30, 40, 35, 45]
					}, {
						name: 'S9',
						color: '#014E64',
						source: [40, 80, 30, 40, 70, 50, 30, 30]
					}],
					max: 200,
					splitNumber: 40,
					xAxisVal: {
						show: true,
						height: 40,
						color: '#00867D',
						formatter: function(val) {
							let showVal = val;
							if (typeof val === 'object') {
								showVal = showVal.join('/')
							}
							return showVal
						}
					}
				},
				options4: {
					xAxis: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00',
						'12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00',
						'22:00', '23:00', '00:00'
					],
					yAxis: [{
						value: ''
					}, {
						value: '优',
						color: '#477100'
					}, {
						value: '良',
						color: '#8ab54c'
					}, {
						value: '轻',
						color: '#f9bd4b'
					}, {
						value: '中',
						color: '#f17305'
					}, {
						value: '重',
						color: '#c01c1d'
					}],
					yAxisLabel: {
						show: true
					},
					dataset: [{
						name: 'PM2.5',
						color: '#fff',
						source: [1.2, 1.8, 2.6, 3.6, 4.2, 3, 4, 3, 4, 5, 6, 9, 8, 7, 4, 2, 3, 5, 6, 4, 2, 3, 3, 4],
						colorFormatter: function(val) {
							let color = "#477100";
							if (2 <= val && val < 4) {
								color = "#8ab54c";
							} else if (4 <= val && val < 6) {
								color = "#f9bd4b";
							} else if (6 <= val && val < 8) {
								color = "#f17305";
							} else if (8 <= val && val < 10) {
								color = "#c01c1d";
							} else if (val == 10) {
								color = "#FFFFFF";
							}
							return color
						}
					}],
					xAxisLine: {
						color: '#e3e3e3',
						itemPadding: '0 36rpx'
					},
					max: 10,
					splitNumber: 2,
					columnBarWidth: 8
				},
				options5: {
					xAxis: ['4/1', '4/2', '4/3', '4/4', '4/5', '4/6', '4/7', '4/8', '4/9', '4/10', '4/11',
						'4/12', '4/13', '4/14', '4/15', '4/16', '4/17', '4/18', '4/19', '4/20', '4/21',
						'4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '4/28', '4/29', '4/30'
					],
					xAxisLine: {
						color: '#e3e3e3',
						itemPadding: '0 40rpx'
					},
					xAxisTick: {
						color: 'transparent'
					},
					yAxisLine: {
						color: 'transparent',
						itemGap: 60
					},
					yAxisLabel: {
						show: false
					},
					splitLine: {
						color: 'transparent'
					},
					dataset: [{
						name: '收入',
						color: '#f74d54',
						source: [2000, 1400, 2800, 3800, 2200, 900, 2600, 4500, 4000, 3600, 600, 900, 800, 700,
							2000,
							1500, 3000, 1800, 1200, 1400, 800, 900, 3000, 400, 800, 1800, 2000, 1200, 900, 500
						]
					}],
					max: 5000,
					splitNumber: 1000,
					columnBarWidth: 24,
					xAxisVal: {
						show: true,
						height: 30,
						color: '#f74d54',
						nowrap: true,
						formatter: function(val) {
							return parseFloat(val).toFixed(2).toString().split('').reverse().join('').replace(
									/(\d{3})/g, '$1,')
								.replace(
									/\,$/, '').split('').reverse().join('');
						}
					},
					currentIndex: 3
				}
			}
		},
		onReady() {
			//需要等组件加载完成
			this.$refs.tui_column_1.draw(this.options1.dataset)
			this.$refs.tui_column_2.draw(this.options2.dataset, this.options2.xAxisVal.formatter)
			this.$refs.tui_column_3.draw(this.options3.dataset, this.options3.xAxisVal.formatter)
			this.$refs.tui_column_4.draw(this.options4.dataset)
			this.$refs.tui_column_5.draw(this.options5.dataset, this.options5.xAxisVal.formatter)
		},
		methods: {
			columnClick(e) {
				console.log(e)
			}
		}
	}
</script>

<style>
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 30rpx 0;
		box-sizing: border-box;
		text-align: center;
	}

	.tui-charts-box {
		width: 100%;
		padding: 0 30rpx 0 80rpx;
		box-sizing: border-box;
	}
</style>
